<template>
  <div class="goods-sku">
    <dl v-for="spec in goods.specs" :key="spec.id">
      <dt>{{ spec.name }}</dt>
      <dd>
        <template v-for="btn in spec.values" :key="btn.name">
          <img
            :class="{ selected: btn.selected, disabled: btn.disabled }"
            @click="changeSku(btn, spec)"
            :src="btn.picture"
            v-if="btn.picture"
            :alt="btn.name"
            :title="btn.name"
          />
          <span
            :class="{ selected: btn.selected, disabled: btn.disabled }"
            @click="changeSku(btn, spec)"
            v-else
          >
            {{ btn.name }}</span
          >
        </template>
      </dd>
    </dl>
  </div>
</template>
<script>
import { getPathMap, updateDisabledStatus, getSelectedSpec, initDefaultStatus, spliter } from '@/utils/getPathMap'

export default {
  name: 'GoodsSku',
  props: {
    goods: {
      type: Object,
      default: () => ({
        specs: [],
        skus: []
      })
    },
    skuId: {
      type: String,
      default: ''
    }
  },
  setup (props, context) {
    // 进入页面如果传入了skuId  ,默认按照skuId进行高亮也就是 selected给个true
    // console.log('props.skuId', props.skuId)
    if (props.skuId) {
      initDefaultStatus(props.goods, props.skuId)
    }
    // 获取路径字典
    const pathMap = getPathMap(props.goods.skus)
    // console.log('pathMap', pathMap)
    // 初始化的时候更新按钮禁用状态
    updateDisabledStatus(props.goods.specs, pathMap)
    const changeSku = (btn, spec) => {
      // console.log(btn)
      // 给选中的加一个选中的属性
      // 做个健全 如果不可点击 直接返回
      if (btn.disabled) return
      if (btn.selected) {
        btn.selected = false
      } else {
        // 只需自己有选中状态，其他的都取消选中；先取消所有在选中自己
        spec.values.forEach(item => {
          item.selected = false
        })
        btn.selected = true
      }
      // 按顺序获取选中按钮 组成的数组
      const selectedArr = getSelectedSpec(props.goods.specs).filter(item => item)
      // console.log(selectedArr)
      // 判断是否选择了所有的选项
      if (selectedArr.length === props.goods.specs.length) {
        // 从查询字典中 获取选中的skuId
        const skuId = (pathMap[selectedArr.join(spliter)][0])
        // 根据skuId 筛选出选中的sku
        const sku = props.goods.skus.filter(item => item.id === skuId)[0]
        // console.log(sku)
        // 将选中的sku传递个父组件
        context.emit('change', {
          skuId: sku.id,
          price: sku.price,
          oldPrice: sku.oldPrice,
          inventory: sku.inventory,
          specsText: sku.specs.reduce((str, item) => `${str} ${item.name}：${item.valueName}`, '').trim('')
        })
      } else {
        // 有没选中的
        context.emit('change', {})
      }
      // 点击的时候也需要更新按钮禁用状态
      updateDisabledStatus(props.goods.specs, pathMap)
      // console.log(selectedArr)
    }
    return {
      changeSku
    }
  }
}
</script>
<style scoped lang="less">
.sku-state-mixin () {
  border: 1px solid #e4e4e4;
  margin-right: 10px;
  cursor: pointer;
  &.selected {
    border-color: @xtxColor;
  }
  &.disabled {
    opacity: 0.6;
    border-style: dashed;
    cursor: not-allowed;
  }
}
.goods-sku {
  padding-left: 10px;
  padding-top: 20px;
  dl {
    display: flex;
    padding-bottom: 20px;
    align-items: center;
    dt {
      width: 50px;
      color: #999;
    }
    dd {
      flex: 1;
      color: #666;
      > img {
        width: 50px;
        height: 50px;
        .sku-state-mixin ();
      }
      > span {
        display: inline-block;
        height: 30px;
        line-height: 28px;
        padding: 0 20px;
        .sku-state-mixin ();
      }
    }
  }
}
</style>
